웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
만약 특정 영역 전체가 아닌 padding 값을 준 테두리 부분을 제외하고 배경색을 지정하고 싶은 경우 어떻게 해야할까요? 즉 패딩값이 적용되지 않은 콘텐츠 영역만 테두리 색을 지정하는 방법입니다. padding 값에 색을 지정할지 말지를 결정하기 위해 background-clip 속성을 사용합니다.
background-clip: content-box;
그럼 이 속성을 사용하기 이전과 사용 후의 모습을 비교할 필요가 있겠습니다.
# 사용 전...
<body>
<div class='test'>
test
</div>
</body>
<style>
.test {
padding: 5px;
width: 100px;
height: 50px;
background-color: #fa8;
border: 1px solid #000;
}
</style>
test
# 사용 후...
<body>
<div class='test'>
test
</div>
</body>
<style>
.test {
padding: 5px;
width: 100px;
height: 50px;
background-color: #fa8;
border: 1px solid #000;
background-clip: content-box;
}
</style>
test
아래의 글도 찾고 계시지 않나요?